<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <el-form-item label="车辆名称" prop="carName">
        <el-input v-model="dataForm.carName" placeholder="车辆名称"></el-input>
      </el-form-item>
      <el-form-item label="车牌号" prop="carCode">
        <el-input v-model="dataForm.carCode" placeholder="车牌号"></el-input>
      </el-form-item>
      <el-form-item label="驾驶公里" prop="drivingKMs">
        <el-input v-model="dataForm.drivingKMs" placeholder="驾驶公里"></el-input>
      </el-form-item>
      <el-form-item label="元/小时" prop="price">
        <el-input v-model="dataForm.price" placeholder="元/小时"></el-input>
      </el-form-item>
      <el-form-item label="发动机编号" prop="engineNumber"label-width="100px"style="margin-left: -20px">
        <el-input v-model="dataForm.engineNumber"style="margin-left: 0px" placeholder="发动机编号"></el-input>
      </el-form-item>
      <el-form-item label="生产日期" prop="productionLife">
        <el-input type="date" v-model="dataForm.productionLife" placeholder="生产日期"></el-input>
      </el-form-item>
      <el-form-item label="使用状态">
        <el-select v-model="dataForm.carStatus" clearable placeholder="使用状态">
          <el-option label="可使用" value="y"/>
          <el-option label="不可使用" value="n"/>
        </el-select>
      </el-form-item>
      <el-form-item label="车辆类型" prop="carType">
        <el-input v-model="dataForm.carType" placeholder="车辆类型"></el-input>
      </el-form-item>
      <el-form-item label="上传" prop="path">
        <el-upload action="http://db.etoak.com:9527/sysFile/fileUpload"
                   list-type="text"
                   :on-remove="handleRemove"
                   :limit="1"
                   :on-success="handleAvatarSuccess"
                   :on-exceed="handleExceed"
                   :file-list="fileList"
                   :show-file-list="true"
                   :before-upload="beforeAvatarUpload"
                   ref="up" class="up">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        dataForm: {
          id:'',
          carName: '',
          carCode: '',
          drivingKMs: '',
          price: '',
          engineNumber: '',
          productionLife: '',
          carStatus: '',
          carType: '',
          imgId: ''
        },
        fileList:[],
        visible: false,
      }
    },
    methods: {
      init (id) {
        this.dataForm.id = id || 0
        this.dataForm.carName=''
        this.dataForm.carCode=''
        this.dataForm.drivingKMs=''
        this.dataForm.price=''
        this.dataForm.engineNumber=''
        this.dataForm.productionLife=''
        this.dataForm.carStatus=''
        this.dataForm.carType=''
        this.dataForm.imgId=''

        if(this.dataForm.id>0){
          this.$http({
            url: this.$http.adornUrl('/carmanage/info'),
            method: 'get',
            params: this.$http.adornParams({
             'id':this.dataForm.id
            })
          }).then(({data})=>{
            if (data && data.code === 0) {
              this.dataForm = data.car
            }
          })
        }
        this.visible = true
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/carmanage/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data:this.dataForm
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      handleExceed(file,fileList){
        this.$message.error('最多上传一张头像...');
      },
      /* 上传之前的钩子此处多用来进行上传时的格式查询等等
      */
      beforeAvatarUpload(file){
        /* 匹配 MIME 格式 */
        const isJPG = file.type === 'image/jpeg';
        /* 这里表示不能大于500k */
        const isLt2M = file.size / 1024 / 1024 < 0.5;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }

        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 500k!');
        }
        console.log(file)
        return isJPG && isLt2M;
      },
      /*
          文件上传成功时的钩子
          response:上传成功返回的响应
          file:每次上传的文件对象
          fileList:目前所有已经上传的文件数组
      */
      handleAvatarSuccess(response, file, fileList){
        console.log(response,file,fileList)
        this.dataForm.imgId = file.name
        if(response.flag){
          /* 将返回的路径添加进封装路径的表单项属性 */
          //this.ruleForm.paths.push(response.data.path)
          /* 上传成功后将返回的路径赋值给表单项中封装的路径 */
          this.regForm.path = response.data.path
        }
      },
      /*
          文件移除的钩子
          file:点击的要删除的已经上传成功的文件对象
          fileList:目前所有已经上传的文件数组
      */
      handleRemove(file, fileList) {
        /* 此处进行上传文件被删除之后的逻辑 */
        //this.ruleForm.paths.splice(this.ruleForm.paths.indexOf(file.response.data.path),1)
        /* 将已经保存的上传成功的路径恢复为空串 */
        this.regForm.path = ''
      },
    }
  }
</script>
